<template>
    <div class="header">

        <div id="header">
            <h2>账户余额将提现至微信</h2>

            <!--S提现金额input-->
            <div id="deposit-money">
                <cube-input
                        v-model.number="deposit_money"
                        placeholder="请输入提现金额"
                    >
                    <template v-slot:prepend>
                        <span style="font-size: 20px;color: #3C3C5C;">￥</span>
                    </template>
                </cube-input>
            </div>
            <!--E提现金额input-->

            <!--S当前余额-->
            <div id="sum">
                <span>当前余额：{{money}}元</span>
                <!--S全部提现-->
                <div class="deposit-all" @click="deposit_money = money">
                    全部提现
                </div>
                <!--E全部提现-->
            </div>
            <!--E当前余额-->
        </div>

        <!--S提现按钮-->
        <cube-button
                id="deposit-button"
                @click="submit"
                :disabled="request"
        >
            提现
        </cube-button>
        <!--E提现按钮-->

    </div>
</template>

<script>
export default {
    name: "Header",
    data() {
        return {
            // 余额
            money: "0.00",
            // 提现金额
            deposit_money: '',
            // 是否请求中
            request: false
        }
    },
    mounted() {
        this.getMoney()
    },
    methods: {
        /**
         * 获取用户余额
         */
        getMoney() {
            this.$get("member/getMoney")
                .then((res) => {
                    let {code, data} = res.data
                    if(code === 0) {
                        this.money = data
                    }
                })
        },
        /**
         * 提现
         */
        submit() {
            if(!this.checkSubmit()) return
            this.request = true
            this.$post("deposit/deposit", {
                deposit_money: this.deposit_money
            })
                .then((res) => {
                    this.request = false
                    let {code, err_msg, data} = res.data
                    if(code === 0) {
                        this.getMoney()
                        this.deposit_money = ''
                        this.$createToast({
                            time: 1000,
                            txt: data === 'wx' ? '提现成功' : '提现申请已提交，等待审核',
                            type: 'correct',
                            mask: true
                        }).show()
                        this.$emit("deposit-success")
                    } else {
                        this.$createToast({
                            txt: err_msg,
                            type: 'error',
                            mask: true
                        }).show()
                    }
                })
        },
        /**
         * 提现验证
         */
        checkSubmit() {
            if(!/(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/.test(this.deposit_money)) {
                this.$createToast({
                    txt: '请输入正确的提现金额',
                    type: 'error',
                    mask: true
                }).show()
                return false
            }
            if(this.deposit_money > parseFloat(this.money)) {
                this.$createToast({
                    txt: '余额不足',
                    type: 'error',
                    mask: true
                }).show()
                return false
            }
            return true
        }
    }
}
</script>

<style scoped lang="less">
    @import "@/theme.less";
    .header{
        position: absolute;
        top:10px;
        width: 375px;
        height: 230px;
        #header{
            width: 355px;
            height: 160px;
            background: #fff;
            margin: 0 auto 0 auto;
            box-shadow: 0 0 8px #ccc;
            border-radius: 15px;
            padding: 10px;
            box-sizing: border-box;
            h2{
                color: @font-color1;
                margin-bottom: 20px;
            }
            #sum{
                position: relative;
                height: 60px;
                color: @font-color2;
                span{
                    line-height: 60px;
                }
                .deposit-all{
                    position: absolute;
                    top:50%;
                    transform: translateY(-50%);
                    right: 10px;
                    width: 100px;
                    height: 30px;
                    line-height: 35px;
                    text-align: center;
                    border: 1px solid @main-color2;
                    color: @main-color2;
                    border-radius: 15px;
                }
            }
        }
        #deposit-button{
            width: 355px;
            margin: 10px auto 0 auto;
        }
    }
</style>

<style lang="stylus">
    #deposit-money
        height 55px
        border-bottom 1px solid #C7C7CF
    #deposit-money .cube-input::after
        border none
    #deposit-money .cube-input input
        border none
        height 55px
        font-size 20px
    #deposit-money .cube-input input:focus
        outline: none
        border none
</style>
